{extend name="pc/user/layout"/}
{block name="main"}
   <div class="g-1400 g-container" id="pjax-container">
    <div class="o-h t-v t-t"> 
     <div class="col-8 pr5 nowrap"> 
      <div class="in-list o-h bg-bai b rx3" style="height:307px;"> 
       <div class="in-bb"> 
        <dl class="pl5 pr5 f6 bold" style="height:88px;"> 
         <dd> 
          <span><img class="w9 h9 b b2 b-qing r5 mr4" src="https://q4.qlogo.cn/headimg_dl?dst_uin={$userInfo.qq}&spec=100" /></span> 
          <span>{$userInfo.nickname}</span> 
          <span>(平台用户)</span> 
          <span class="f5 ml5 hui nobold">欢迎登陆</span> 
         </dd> 
         <dt> 
		 {php}if($is_daili==1){
			echo  '<a href="'.url('pc/index',['act'=>'daili']).'" class="btn btn-sm btn-huang ml5 rx1">代理后台</a> ' ;
			}
		 {/php}
		 {php}if(config('web_user_id')==$userInfo['uid']){
			echo  '<a href="'.url('pc/admin').'" class="btn btn-sm btn-lan ml5 rx1">网站后台</a> ' ;
			}
		 {/php}
          <a href="javascript:;" class="btn btn-sm btn-lv ml5 rx1" onclick="mode_qq_add('index',0);">添加QQ</a> 
         </dt> 
        </dl> 
       </div> 
       <div class="in-b in-bb" id="gglist"> 
	   <v v-if="total>'0'">
		<v v-for="row in list">
        <dl v-if="row.type === 0" class="p4">
         <i class="icon icon-notification lv"></i> {{row.con}}
        </dl> 
		<dl v-else-if="row.type === 1" class="h10">
         <a class="in h pl4 pr4 hei dl" v-bind:href="row.url" data-pjax=""><i class="icon icon-hot hong"></i> <font class="hong"> [广告推广]</font> <font :color="row.color"> {{row.con}}</font></a>
        </dl>		
		</v>
		</v>
		  <v v-else>
		  <div class="w t-c mt7 mb10" style="height: 80px;"><p class="h11"><i class="icon icon-info f12 nobold hui dl"></i></p><p class="f5 hui">没有更多内容可以显示了</p></div>
		  </v>
       </div> 
       <div class="h11 t-v pl5 pr5 hui" id="links"> 
        <div>
         快捷链接 : 
        </div> 
        <v v-for="row in list">
		<a v-if="row.type === 2" class="btn btn-xs btn-hui btn-1 rx1 ml3" v-bind:href="row.url" data-pjax=""> {{row.con}} </a>
		</v>
       </div> 
      </div> 
     </div> 
     <div class="col-4 p6 o-h bg-bai hei b rx3 nowrap" style="height:307px;"> 
      <div class="f8 hei">
       <img class="w9 h9 r5 mr4" src="https://q4.qlogo.cn/headimg_dl?dst_uin={$userInfo.qq}&spec=100" /> {$userInfo.nickname} 
       <a class="ml3 f3 lan" href="{:url('pc/index',['act'=>'set','s'=>'nickname'])}" target="_blank">修改</a>
       <font class="ml3 f3 hui">UID:{$userInfo.uid}</font>
      </div> 
      <div class="in-list top mt4"> 
       <dl> 
        <dd> 
		 <p class="mt3 hui">账户积分 ：<font class="hong">{$userInfo.jf}</font> <font class="f3">分</font></p>
         <p class="mt3 hui">账户余额 ：<font class="hong">{$userInfo.money}</font> <font class="f3">元</font></p> 
         <p class="mt3 hui">挂机配额 ：<font class="hong">{if condition="$userInfo.peie neq ''"}{$userInfo.peie}{else /}0{/if}</font> <font class="f3">个</font><a class="ml5 f3 lan" href="{:url('pc/index',['act'=>'shop','s'=>'peie'])}" data-pjax="">购买配额</a></p> 
         <p class="mt3"><font class="hui">绑定 QQ ：</font>{$userInfo.qq} <a class="ml5 f3 lan" href="{:url('pc/index',['act'=>'set','s'=>'qq'])}" target="_blank">更改</a></p> 
		 <p class="mt3"><font class="hui">绑定邮箱 ：</font>{$userInfo.mail} </p> 
         <p class="mt3"><font class="hui">平台会员 ：</font>{if condition="$userInfo.viptime neq ''"}<font class="hong">VIP会员</font> {$userInfo.viptime} 到期{else /}未开通{/if} <a class="ml5 f3 lan" href="{:url('pc/index',['act'=>'shop','s'=>'vip'])}" data-pjax="">开通秒赞VIP</a></p> 
         <p class="mt3"><font class="hui">最近登陆 ：</font>{:date('Y-m-d H:i:s', $userInfo.time)}</p> 
        </dd> 
        <dt>
         <a class="btn btn-bai btn-sm b b-hui rx1" href="{:url('pc/index',['act'=>'shop','s'=>'rmb'])}" data-pjax>充值余额</a> 
        </dt> 
       </dl> 
      </div> 
     </div> 
    </div> 
    <div class="mt5 o-h t-v t-t"> 
     <div class="col-5 pr5"> 
      <div class="in-list top o-h bg-bai b rx3"> 
       <div class="g-title pl4 pr4 t-v bb"> 
        <div class="col-12 h t-v bold"> 
         <span class="mr10">CQY聊天室</span> 
        </div> 
       </div> 
       <div class="h23 o-y chatscrool"> 
        <div class="in-b in-p f3" id="chatheight"></div> 
       </div> 
       <dl> 
        <dd>
         <input type="text" class="form no bt bt-hui" id="chatcon" placeholder="请在此输入聊天内容（禁止发广告）" value="" maxlength="{:config('sys_zishu')}" required="" autocomplete="off" />
        </dd> 
        <dt>
         <button class="btn btn-qing w13" onclick="ajax_post_chat();">发 送</button> 
        </dt>
       </dl> 
      </div> 
     </div> 
     <div class="col-7"> 
      <div class="w h16 o-h t-v t-c bg-bai b rx3 pl3 pr3"> 
       <div class="w"> 
        <p class="f7">{$siteCount['user']}</p> 
        <p class="mt2 hui"><i class="icon icon-my f5 nobold mr1"></i>用户数量</p> 
       </div> 
       <div class="w"> 
        <p class="f7">{$siteCount['qq']}</p> 
        <p class="mt2 hui"><i class="icon icon-qq f5 nobold mr1"></i>QQ数量</p> 
       </div> 
       <div class="w"> 
        <p class="f7">{$siteCount['mzcount']}</p> 
        <p class="mt2 hui"><i class="icon icon-appreciate f5 nobold mr1"></i>积累秒赞</p> 
       </div> 
       <div class="w"> 
        <p class="f7">{$siteCount['mpcount']}</p> 
        <p class="mt2 hui"><i class="icon icon-community f5 nobold mr1"></i>积累秒评</p> 
       </div> 
      </div> 
      <div class="mt5 t-v"> 
       <div class="col-6 pr3"> 
        <div class="w o-h bg-bai b rx3"> 
         <div class="g-title pl4 pr4 t-v bb"> 
          <div class="col-8 h t-v bold"> 
           <span class="mr10">最新秒赞QQ</span> 
          </div> 
          <div class="col-4 t-v t-r">
           <a class="w15 h9 lan f3 t-v t-r" href="{:url('pc/index',['act'=>'link','s'=>'mzq'])}" data-pjax="">QQ秒赞墙</a>
          </div> 
         </div> 
         <div class="o-y in-list in-b in-p" style="height:318px;" id="mzqqs"> 
		 <v v-if="total>'0'">
          <dl v-for="row in list"> 
           <dt>
            <img class="w9 h9 b r5 mr3" v-bind:src="row.img" />
           </dt> 
           <dd> 
            <p class="lan bold"><i class="icon icon-qq"></i> {{row.qq}}</p> 
            <p class="mt0 f3 hui"><i class="icon icon-time nobold"></i> {{row.lasttime}}</p> 
           </dd> 
           <dt>
            <a class="btn btn-xs btn-hei dl btn-1 rx1" v-bind:href="row.url" target="_blank">加好友</a>
           </dt> 
          </dl>
		  </v>
			  <v v-else>
			  <div class="w h18 t-c mt7 mb10"><p class="h11"><i class="icon icon-info f12 nobold hui dl"></i></p><p class="f5 hui">没有更多内容可以显示了</p></div>
			  </v>
         </div> 
        </div> 
       </div> 
       <div class="col-6 pl3" id="mzph"> 
        <div class="w o-h bg-bai b rx3"> 
         <div class="g-title pl4 pr4 t-v bb"> 
          <div class="col-8  h t-v bold"> 
           <span class="mr10">秒赞排行榜</span> 
          </div> 
          <div class="col-4 t-v t-r">
           <a class="w15 h9 lan f3 t-v t-r" onclick="mode_qq_add('index',0);">添加QQ</a>
          </div> 
         </div> 
         <div class="o-y in-list in-b in-p" style="height:318px;"> 
			 <v v-if="total>'0'">
			  <dl v-for="row in list">  
			   <dt>
				<img class="w6 h6 b ml3 mr3 r5" :src="row.img" />
			   </dt> 
			   <dd>
				{{row.qq}}
			   </dd> 
			   <dt>
				<span class="tag bg-hei">{{row.mzcount}}次</span>
			   </dt> 
			  </dl>
			  </v>
			  <v v-else>
			  <div class="w h18 t-c mt7 mb10"><p class="h11"><i class="icon icon-info f12 nobold hui dl"></i></p><p class="f5 hui">没有更多内容可以显示了</p></div>
			  </v>
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div> 
   <script type="text/javascript">
    var lockReconnect = false;

    var ws = null;

    var ws_url = '{:ws(config('sys_chat_ws'))}';

    createWebSocket(ws_url);

    function createWebSocket(url) {
        try {
            if ('WebSocket' in window) {
                ws = new WebSocket(url);
            }
            initEventHandle();
        } catch (e) {
            reconnect(url);
            console.log(e);
        }
    }

    function initEventHandle() {
        ws.onclose = function () {
            console.log("ws连接关闭" + new Date().toLocaleString());
        };
        ws.onerror = function () {
            reconnect(ws_url);
            console.log("ws连接错误");
        };
        ws.onopen = function () {
            console.log("ws连接成功" + new Date().toLocaleString());
        };
        ws.onmessage = function (ev) {    //如果获取到消息，心跳检测重置
            var data = JSON.parse(ev.data);
            switch (data.type) {
                case 1:
					if(data.domain == '{:config('web_domain')}'){
						if (data.uid == {$userInfo['uid']}) {
							if (data.zid == {$web_id}) {
								var content = data.Pc_Msg;
							} else {
								var content = '';
							}
						}else{
							if (data.zid == {$web_id}) {
								var content = data.Pc_Msg;
								$('#audioPlay')[0].play();//有其他人的新消息，播放提示音
							} else {
								var content = '';
							}
						}
					}
                    $('#chatheight').append(content);
                    ChatScroolToEnd();
                    break;
                case 'ping':
                    lockReconnect = true;
                    console.log("ws心跳检测正常" + new Date().toLocaleString());
                    break;
            }
        };
    }


    // 监听窗口关闭事件，当窗口关闭时，关闭websocket连接
	window.onbeforeunload = function()
	{ 
		ws.close();
	}
    
    function reconnect(url) {
        if (lockReconnect) return;
        lockReconnect = true;
        setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
            createWebSocket(url);
            lockReconnect = false;
        }, 3000);
    }

    function ajax_post_chat() {
        var chatcon = x.getval('#chatcon', '请先输入内容!');
        if (!chatcon) return;
        $('#chatcon').focus().val("");
        $.ajax({
            type: 'POST',
            url: '{:url('user_ajax/chat',['act'=>'send'])}',
            dataType: 'json',
            data: {chatcon: chatcon},
            success: function (data) {
                if (data.code === 0) {
                    sendData(data);
                } else if (data.code === -1) {
                    x.msg(data.error);
                } else {
                    x.msg(data.error);
                    ChatScroolToEnd();
                }
            },
        });
    }

    function sendData(str) {
        ws.send(JSON.stringify(str));
    }

    function ChatScroolToEnd() {
        var h = $("#chatheight").height() - $(".chatscrool").height(); // 获取总共需要滚动的距离
        var t = h - $(".chatscrool").scrollTop();
        if (t > 1000) {
            $(".chatscrool").scrollTop(h);
        } else if (h > 0) {
            $(".chatscrool").animate({scrollTop: (h)}, t + 100);
        }
    }

   function LoadList() {
        x.gethtml('{:url('user_ajax/chat',['act'=>'load'])}', 'chatheight', 2, 1);
    }

    $(function ($) {
        LoadList();
    });

</script>
   {/block}
   {block name='foot'}
   <audio id="audioPlay">
        <source src="/Static/chat.wav" type="audio/wav">
    </audio>
	
    <script>
        var gglist = new Vue({
            el: '#gglist',
            data: {
                search: {
                    page: 1,
                    pageSize: 100
                },
                total: 0,
                list: []
            },
            methods: {
                loadList: function () {
                    var vue = this;
                   app.ajax("{:url('user_ajax/countList',['action'=>'gg'])}", this.search, function (data) {
                        if (data.code === 0) {
                            vue.total = data.total;
                            vue.list = data.list;
                        } else {
                           layer.msg(data.message);
                        }
                    })
                },
            },
            mounted: function () {
                this.loadList();
            }
        });
		var links = new Vue({
            el: '#links',
            data: {
                search: {
                    page: 1,
                    pageSize: 100
                },
                total: 0,
                list: []
            },
            methods: {
                loadList: function () {
                    var vue = this;
                   app.ajax("{:url('user_ajax/countList',['action'=>'gg'])}", this.search, function (data) {
                        if (data.code === 0) {
                            vue.total = data.total;
                            vue.list = data.list;
                        } else {
                           layer.msg(data.message);
                        }
                    })
                },
            },
            mounted: function () {
                this.loadList();
            }
        });
		var mzqqs = new Vue({
            el: '#mzqqs',
            data: {
                search: {
                    page: 1,
                    pageSize: 10
                },
                total: 0,
                list: []
            },
            methods: {
                loadList: function () {
                    var vue = this;
                   app.ajax("{:url('user_ajax/countList',['action'=>'mzqq'])}", this.search, function (data) {
                        if (data.code === 0) {
                            vue.total = data.total;
                            vue.list = data.list;
                        } else {
                           layer.msg(data.message);
                        }
                    })
                },
            },
            mounted: function () {
                this.loadList();
            }
        });
		var mzph = new Vue({
            el: '#mzph',
            data: {
                search: {
                    page: 1,
                    pageSize: 10
                },
                total: 0,
                list: []
            },
            methods: {
                loadList: function () {
                    var vue = this;
                   app.ajax("{:url('user_ajax/countList',['action'=>'mzph'])}", this.search, function (data) {
                        if (data.code === 0) {
                            vue.total = data.total;
                            vue.list = data.list;
                        } else {
                           layer.msg(data.message);
                        }
                    })
                },
            },
            mounted: function () {
                this.loadList();
            }
        });
    </script>
    {/block}